<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>产品状态看板</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>CSS/layout.css" />
	<script type="text/javascript" src="<%=basePath%>js/jquery.js"language="javascript"></script>
	<style type="text/css">  
     .tdSecondColor {  
         background-color: lightgray;  
      }  
      .tdFirstColor{
         background-color: #FFFFFF;  
      }
     .tdOverColor {  
        background-color: #F90;  
      }  
      .thColor{  
        background-color:orange;  
      }  
</style> 
  </head>
  <body>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;<a id="conA" href="javascript:hideCond();" style="font-size: 11px;">隐藏条件框</a>
        &nbsp;&nbsp;&nbsp;&nbsp;<a id="downOrder" href="javascript:void();" style="font-size: 11px;">开启滚动功能</a>
    <div style="background-color: lightgreen;border: 1;" id="condition">
    <p> 
    <form:form method="post" action="orderWip.do" modelAttribute="vo">
       <form:hidden path="active"/>
       <table>
         <tr>
           <th align="right"><fmt:message key="orderWip.cmtOrderId"/></th><td><form:input path="cmtOrderId"/>&nbsp;&nbsp;</td>
           <th align="right"><fmt:message key="orderWip.pdtSkuId"/></th><td><form:input path="pdtSkuId"/>&nbsp;&nbsp;</td>
           <th align="right"><fmt:message key="orderWip.cmtPdtSkuId"/></th><td><form:input path="cmtPdtSkuId"/>&nbsp;&nbsp;</td>
           <th align="right"><fmt:message key="orderWip.staffName"/></th><td><form:input path="staffName"/>&nbsp;&nbsp;</td>
           <td><a href="orderWip.do?active=1" style="font-size: 12px;">只看未完成的</a>|| <a href="orderWip.do?pdtStatus=4" style="font-size: 12px;">只看完成的</a></td>
         </tr>
         <tr>
           <th align="right"><fmt:message key="orderWip.arriveDate"/></th>
           <td colspan="2">
             <input value="<fmt:formatDate value='${vo.arriveDate}' pattern='yyyy-MM-dd'/>" name="arriveDate" id="arriveDate" onclick="fPopCalendar(document.getElementById('arriveDate'),document.getElementById('arriveDate'));return false;" onkeydown="iniTxt_OnKeydown(event,tdis);"/>
             <font style="font-size: 11px;"><fmt:message key="orderWip.arriveDate.all"/>
             <form:radiobutton path="arriveDateFlag" value="0"/>
             &nbsp;&nbsp;<fmt:message key="orderWip.arriveDate.before"/>
             <form:radiobutton path="arriveDateFlag" value="2"/>
             &nbsp;&nbsp;<fmt:message key="orderWip.arriveDate.after"/>
             <form:radiobutton path="arriveDateFlag" value="1"/></font>
           </td>
           <th align="right"><fmt:message key="orderWip.expectDate"/></th>
           <td colspan="2">
             <input value="<fmt:formatDate value='${vo.expectDate}' pattern='yyyy-MM-dd'/>" name="expectDate" id="expectDate" onclick="fPopCalendar(document.getElementById('expectDate'),document.getElementById('expectDate'));return false;" onkeydown="iniTxt_OnKeydown(event,tdis);"/>
             <font style="font-size: 11px;"><fmt:message key="orderWip.expectDate.all"/>
             <form:radiobutton path="expectDateFlag" value="0"/>
             &nbsp;&nbsp;<fmt:message key="orderWip.expectDate.before"/>
             <form:radiobutton path="expectDateFlag" value="2"/>
             &nbsp;&nbsp;<fmt:message key="orderWip.expectDate.after"/>
             <form:radiobutton path="expectDateFlag" value="1"/></font>
             &nbsp;&nbsp;&nbsp;&nbsp;
           </td>
           <th align="right"><fmt:message key="orderWip.trackNo"/></th><td><form:input path="trackNo" size="4"/>&nbsp;&nbsp;</td>
           <td><input type="submit" value="查询" class="newSearchButton"></td>
         </tr>
       </table>
    </form:form>
     </div>
     <div style="overflow: hidden;height: 800;">
    <table border=1 width=100% style="font-family: Verdana;font-size: 12px;"  id="dataTable">
            <tr class="thColor">
              <th width="5%"><fmt:message key="orderWip.arriveDate"/></th>
              <th width="6%"><fmt:message key="orderWip.cmtOrderId"/></th>
              <th width="5%"><fmt:message key="orderWip.trackNo"/></th>
              <th width="18%"><fmt:message key="orderWip.pdtSkuId"/></th>
              <th width="10%"><fmt:message key="orderWip.cmtPdtSkuId"/></th>
              <th width="11%"><fmt:message key="orderWip.startTime"/></th>
              <th width="12%"><fmt:message key="orderWip.endTime"/></th>
              <th width="6%"><fmt:message key="orderWip.pdtStatus"/></th>
              <th width="6%"><fmt:message key="orderWip.staffName"/></th>
              <th width="5%"><fmt:message key="orderWip.expectDate"/></th>
              <th width="12%"><fmt:message key="orderWip.sendDate"/></th>
            </tr>
            <tbody>
          <c:forEach var="orderWip" items="${dataList.pageList}" varStatus="idx">
             <tr id="Item${idx.index}|${orderWip.pdtSkuId}">
                <td width="5%" align="center"><fmt:formatDate value="${orderWip.arriveDate}" type="date"/></td>
                <td width="6%" align="center">${orderWip.cmtOrderId}</td>
                <td width="5%" align="center">
                  <c:if test="${not empty orderWip.pdtSkuId}">
                    <b>${fn:split(orderWip.pdtSkuId,"-")[3]}/${fn:split(orderWip.pdtSkuId,"-")[2]}</b>
                  </c:if>
                </td>
                <td width="18%">${orderWip.pdtSkuId}</td>
                <td width="10%" align="center">${orderWip.cmtPdtSkuId}</td>
                <td width="11%" align="center">&nbsp;<fmt:formatDate value="${orderWip.startTime}" type="both"/></td>
                <td width="12%" align="center">&nbsp;<fmt:formatDate value="${orderWip.endTime}" type="both"/></td>
                <td width="6%" align="center">&nbsp;<fmt:message key="product.pdtStatus${orderWip.pdtStatus}"/></td>
                <td width="6%" align="center">&nbsp;${orderWip.staffName}</td>
                <td width="5%" align="center">&nbsp;<fmt:formatDate value="${orderWip.expectDate}" type="date"/></td>
                <td width="12%" align="center">&nbsp;<fmt:formatDate value="${orderWip.sendDate}" type="both"/></td>
             </tr>
          </c:forEach>
          </tbody>
        </table>
        </div>
      <script language="javascript" type="text/javascript" src="<%=basePath%>js/displayLayer.js"></script>
      <script language="javascript" type="text/javascript" src="<%=basePath%>js/calendar.js"></script>
      <script language="javascript" type="text/javascript" src="<%=basePath%>js/popupdiv_shim.js"></script>
      <script src='<%=basePath%>dwr/interface/wipService.js'></script>
      <script src="<%=basePath%>dwr/engine.js"></script>
      <script src="<%=basePath%>js/ftyUtils.js"></script>
      <script type="text/javascript">
	   $(document).ready(function(){
	        //var demo = document.getElementById("demo");
            //var demo1 = document.getElementById("demo1");
            //var demo2 = document.getElementById("demo2");
	        var speed = 700;
	        //demo.scrollTop = demo.scrollHeight;
	        var MyMar = setInterval(Marquee, speed);
	        clearInterval(MyMar);
            $("#conA").toggle(
                function(){
                    hideCond();
                },function(){
                    showCond();
             });
            $("#downOrder").toggle(
                function(){
                    MyMar = setInterval(Marquee, speed);
                    $("#downOrder").empty();
                    $("#downOrder").text("关闭滚动功能");
                },function(){
                    clearInterval(MyMar);
                    $("#downOrder").empty();
                    $("#downOrder").text("开启滚动功能");
             });
             $("#dataTable tr:even").addClass("tdFirstColor");
             $("#dataTable tr:odd").addClass("tdSecondColor");
             $("#dataTable tr").mouseover(function(){$(this).addClass("tdOverColor");}).mouseout(function(){$(this).removeClass("tdOverColor");});
       });
       var rowCnt=0;
       function Marquee() {
		//if (demo.scrollTop == 0){
			//demo.scrollTop += demo2.offsetHeight;
			//updateWip(0,parseInt(${dataList.rowCnt/2}));
		//}else {
		    //if(demo1.offsetTop == demo.scrollTop/2){
		      //updateWip(parseInt(${dataList.rowCnt/2}),parseInt(${dataList.rowCnt}));
		    //}
			//demo.scrollTop--;
			rowCnt++;
			var table = document.getElementById("dataTable").getElementsByTagName("tbody")[1];
            var row = table.lastChild;
            table.removeChild(row);    
            table.insertBefore(row,table.firstChild);
            if(rowCnt==parseInt(${dataList.rowCnt/2})){
               updateWip(0,parseInt(${dataList.rowCnt/2}));
               $("#dataTable tr").mouseover(function(){$(this).addClass("tdOverColor");}).mouseout(function(){$(this).removeClass("tdOverColor");});
            }else if(rowCnt>=parseInt(${dataList.rowCnt})){
               updateWip(parseInt(${dataList.rowCnt/2}),parseInt(${dataList.rowCnt}));
               rowCnt=0;
               $("#dataTable tr").mouseover(function(){$(this).addClass("tdOverColor");}).mouseout(function(){$(this).removeClass("tdOverColor");});
            }
		//}
	    }
	   function hideCond(){
	     $("#conA").empty();
	     $("#conA").text("显示条件框");
	     $("#condition").hide(10);
	   }
	   function showCond(){
	     $("#conA").empty();
	     $("#conA").text("隐藏条件框");
	     $("#condition").show(10);
	   }
	   
	   function updateWip(idx, nIdx){
	     $("tr[id^=Item]").each(function(i){
	        if(i>=idx && i<=nIdx){
	           var id=this.id;
	           var cssClass=$(this).attr("class");
	           var sku=this.id.substring(4).split("|")[1];
	           var seft = this;
	           wipService.getWipBySkuId(sku,function(data){
	              var newest = "<tr id='"+id+"' class="+cssClass+">";
                      if(isEmpty(data.arriveDate)){
                         newest+="<td width='5%' align='center'>&nbsp;</td>";
                      }else{
                         var arriveDate = new Date(data.arriveDate);
                         newest+="<td width='5%' align='center'>"+arriveDate.format("YYYY-MM-dd")+"</td>";
                      }
                      newest+= "<td width='6%' align='center'>"+data.cmtOrderId+"</td>";
                      try{
                        newest+= "<td width='5%' align='center'><b>"+data.pdtSkuId.split('\_')[3]+"/"+data.pdtSkuId.split('\_')[2]+"</b></td>";
                      }catch(e){
                        newest+= "<td width='5%' align='center'><b>"+data.pdtSkuId.trackNo+"</b></td>";
                      }
                      
                      newest+= "<td width='18%'>"+data.pdtSkuId+"</td>";
                      newest+= "<td width='10%' align='center'>"+data.cmtPdtSkuId+"</td>";
                      
                      if(isEmpty(data.startTime)){
                         newest+="<td width='9%' align='center'>&nbsp;</td>";
                      }else{
                         var startTime = new Date(data.startTime);
                         newest+="<td width='11%' align='center'>"+startTime.format("YYYY-MM-dd hh:mm:ss")+"</td>";
                      }
                      
                      if(isEmpty(data.endTime)){
                         newest+="<td width='9%' align='center'>&nbsp;</td>";
                      }else{
                         var endTime = new Date(data.endTime);
                         newest+="<td width='12%' align='center'>"+endTime.format("YYYY-MM-dd hh:mm:ss")+"</td>";
                      }
                      var setColor=true;
                      switch(data.pdtStatus){
                         case 1:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus1'/></td>";
                            break;
                         case 2:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus2'/></td>";
                            break;
                         case 3:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus3'/></td>";
                            break;
                         case 4:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus4'/></td>";
                            setColor=false;
                            break;
                         case 5:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus5'/></td>";
                            setColor=false;
                            break;
                         case 6:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus6'/></td>";
                            break;
                         case 7:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus7'/></td>";
                            break;
                         default:
                            newest+="<td width='6%' align='center'>&nbsp;<fmt:message key='product.pdtStatus1'/></td>";
                            break;
                      }
                      
                      if(isEmpty(data.staffName)){
                         newest+="<td width='6%' align='center'>&nbsp;</td>";
                      }else{
                         newest+= "<td width='6%' align='center'>"+data.staffName+"</td>";
                      }
                      
                      var trBgColor="";
                      if(isEmpty(data.expectDate)){
                         newest+="<td width='5%' align='center'>&nbsp;</td>";
                      }else{
                         var expectDate = new Date(data.expectDate);
                         var betweenDay = expectDate.compareDate(expectDate,null);
                         if(setColor && <%=com.b2c.ftysys.constants.FtySysConstants.DELAY_DAY%> >= betweenDay){
                             if(<%=com.b2c.ftysys.constants.FtySysConstants.RED_DAY%> >= betweenDay){
                                    trBgColor="red";
                             }else{
                                    trBgColor="yellow";
                             }
                         }
                         newest+="<td width='5%' align='center' bgcolor="+trBgColor+">"+expectDate.format("YYYY-MM-dd")+"</td>";
                      }
                      
                      if(isEmpty(data.sendDate)){
                         newest+="<td width='12%' align='center'>&nbsp;</td>";
                      }else{
                         var sendDate = new Date(data.sendDate);
                         newest+="<td width='12%' align='center'>"+sendDate.format("YYYY-MM-dd hh:mm:ss")+"</td>";
                      }
                      
                      newest+="</tr>";
                      $(seft).replaceWith(newest);
                      //$("#"+id).mouseover(function(){$(this).addClass("tdOverColor");}).mouseout(function(){$(this).removeClass("tdOverColor");}); 
	           });
	        }
	     });
	   };
	   
	</script>
  </body>
</html>
